import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from 'antd-mobile';

function Index() {
  const nav = useNavigate();
  const [registrationInfo, setRegistrationInfo] = useState<any>(null);

  type RegistrationDetails = {
    patientName: string;
    registrationNumber: string;
    doctorName: string;
    doctorTitle: string;
    hospital: string;
    department: string;
    fee: number;
    appointmentDate: string;
    appointmentTime: string;
    departmentAddress: string;
    paymentMethod: string;
  }

  const handleBack = () => {
    nav(-1);
  };

  const handleMoreOptions = () => {
    console.log('更多选项');
  };

  const handleTarget = () => {
    console.log('目标功能');
  };

  const handleCancelRegistration = () => {
    if (window.confirm('确定要取消挂号吗？')) {
      console.log('取消挂号');
      // 这里可以调用取消挂号的API
       nav('/sy');
    }
  };

  useEffect(() => {
    // 模拟获取挂号信息
    const mockRegistrationInfo: RegistrationDetails = {
      patientName: '王小柯',
      registrationNumber: '202001270001',
      doctorName: '刘医生',
      doctorTitle: '主任医师',
      hospital: '四川省保健院南苑',
      department: '门诊外一科',
      fee: 66.00,
      appointmentDate: '2020-01-27',
      appointmentTime: '08:30-12:00',
      departmentAddress: '四川省成都市锦江区画溪路666号',
      paymentMethod: '自费支付'
    };

    setRegistrationInfo(mockRegistrationInfo);
  }, []);

  return (
    <div style={{ width: '100vw', minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航栏 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '12px 16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div 
            onClick={handleBack}
            style={{ 
              fontSize: '20px', 
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ‹
          </div>
          <div style={{ fontSize: '18px', fontWeight: 600, color: '#333' }}>
            挂号详情
          </div>
        </div>
       
      </div>

      {/* 顶部信息提示横幅 */}
      <div style={{
        background: '#e6f7ff',
        padding: '12px 16px',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}>
        <span style={{ fontSize: '16px' }}>ℹ️</span>
        <span style={{ fontSize: '14px', color: '#1677ff' }}>
          请于就诊当日凭此信息到院就诊
        </span>
      </div>

      {/* 挂号成功提示 */}
      <div style={{
        background: '#fff',
        padding: '20px 16px',
        textAlign: 'center',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          fontSize: '18px',
          fontWeight: 600,
          color: '#52c41a',
          marginBottom: '8px'
        }}>
          ✅ 挂号成功
        </div>
        <div style={{
          fontSize: '14px',
          color: '#666'
        }}>
          您的挂号信息已确认，请按时就诊
        </div>
      </div>

      {/* 挂号详细信息 */}
      {registrationInfo && (
        <div style={{
          background: '#fff',
          margin: '16px',
          borderRadius: '12px',
          overflow: 'hidden',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        }}>
          {/* 就诊人信息 */}
          <div style={{
            padding: '16px',
            borderBottom: '1px solid #f0f0f0',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <span style={{ fontSize: '16px', color: '#333' }}>就诊人</span>
            <span style={{ fontSize: '16px', color: '#333', fontWeight: 500 }}>
              {registrationInfo.patientName}
            </span>
          </div>

          {/* 登记号 */}
          <div style={{
            padding: '16px',
            borderBottom: '1px solid #f0f0f0',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <span style={{ fontSize: '16px', color: '#333' }}>登记号</span>
            <span style={{ fontSize: '16px', color: '#1677ff', fontWeight: 500 }}>
              {registrationInfo.registrationNumber}
            </span>
          </div>

          {/* 医生信息 */}
          <div style={{
            padding: '16px',
            borderBottom: '1px solid #f0f0f0',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <span style={{ fontSize: '16px', color: '#333' }}>医生</span>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: '16px', color: '#333', fontWeight: 500 }}>
                {registrationInfo.doctorName}
              </div>
              <div style={{ fontSize: '14px', color: '#999' }}>
                {registrationInfo.doctorTitle}
              </div>
            </div>
          </div>

          {/* 医院 */}
          <div style={{
            padding: '16px',
            borderBottom: '1px solid #f0f0f0',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <span style={{ fontSize: '16px', color: '#333' }}>医院</span>
            <span style={{ fontSize: '16px', color: '#333', fontWeight: 500 }}>
              {registrationInfo.hospital}
            </span>
          </div>

          {/* 科室 */}
          <div style={{
            padding: '16px',
            borderBottom: '1px solid #f0f0f0',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <span style={{ fontSize: '16px', color: '#333' }}>科室</span>
            <span style={{ fontSize: '16px', color: '#333', fontWeight: 500 }}>
              {registrationInfo.department}
            </span>
          </div>

          {/* 费用 */}
          <div style={{
            padding: '16px',
            borderBottom: '1px solid #f0f0f0',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <span style={{ fontSize: '16px', color: '#333' }}>费用</span>
            <span style={{ fontSize: '18px', color: '#ff6b00', fontWeight: 600 }}>
              ¥{registrationInfo.fee.toFixed(2)}
            </span>
          </div>

          {/* 预约时间 */}
          <div style={{
            padding: '16px',
            borderBottom: '1px solid #f0f0f0',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <span style={{ fontSize: '16px', color: '#333' }}>预约时间</span>
            <span style={{ fontSize: '16px', color: '#333', fontWeight: 500 }}>
              {registrationInfo.appointmentDate} {registrationInfo.appointmentTime}
            </span>
          </div>

          {/* 科室地址 */}
          <div style={{
            padding: '16px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'flex-start'
          }}>
            <span style={{ fontSize: '16px', color: '#333' }}>科室地址</span>
            <span style={{ 
              fontSize: '16px', 
              color: '#333', 
              fontWeight: 500,
              textAlign: 'right',
              maxWidth: '60%',
              lineHeight: '1.4'
            }}>
              {registrationInfo.departmentAddress}
            </span>
          </div>
        </div>
      )}

      {/* 底部取消挂号按钮 */}
      <div style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        padding: '16px',
       
        borderTop: '1px solid #f0f0f0'
      }}>
        <Button
         
          block
          size="large"
          onClick={handleCancelRegistration}
          style={{
            borderRadius: '8px',
            height: '48px',
            fontSize: '16px',
            fontWeight: 600,
            backgroundColor:'none'
          }}
        >
          取消挂号
        </Button>
      </div>

      {/* 底部占位，避免按钮遮挡内容 */}
      <div style={{ height: '80px' }}></div>
    </div>
  );
}

export default Index;
